<template>
<div >
  <h2>列表渲染显示过滤后的结果</h2>
  <ul>
    <li v-for="n in evenNumbers" :key="n">{{n}}</li>
  </ul>
  <h2>动态组件</h2>
  <input type="button" v-for="button in ButtonType" :key="button"  :value="button" @click="isComponent(button)">
 

<transition name="transition-box">
    <keep-alive > 
     <div :is='Component'> </div> 
</keep-alive>
</transition>
  <hr>
<div :style="{fontSize:FontSize+'px'}">
   <h2>父子组件通信|自定义事件互用</h2>

 <emit title="父组件通过props子组件属性传过来的值---" @enlarge-text="FontSize+=$event" :fun="fun"  ></emit>

</div>
</div>
</template>

<script>
import emit from '../components/emit.vue'
import A from '../components/A'
import B from '../components/B'
import C from '../components/C'
export default {



data(){ 

return {

key:[1,2,3,4,5,6,7,8,9],
Component:'A',
ButtonType:{A:"A",B:"B",C:"C"},
FontSize:12

}

},

components: {
  emit,A,B,C
},

computed: {

evenNumbers: function () {

return this.key.filter(function (number) {

return number % 2===0

})

}

},

beforeCreate:function (){

// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

debugger;

 },

created:function (){

 // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。

this.click(this.key)

 },

 beforeMount:function (){

},

methods: {

// 在挂载开始之前被调用：相关的 render 函数首次被调用。

click(Vlue,key){

debugger;

console.log(Vlue,key)

},
isComponent(value){

  this.Component = value
    // alert(this.component)
},
 fun(value){
   alert(value)


 
 }



}


}

</script>

<style  scope>
.transition-box-enter-active {
  transition: all 2s;
}
/* .transition-box-leave-active {
         
} */
</style>
